<template>
  <view style="background-color: #fefefe;">
    <view>
      <view class="page_top2" :style="{
        background: topNav ? 'white' : 'transparent',
        'z-index': 199,
      }">
        <top-status></top-status>
        <view class="tabsBack">
          <view @click="goBack()" class="blackbox">
            <!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
							mode="widthFix"></image> -->
            <uni-icons :color="topNav ? 'black' : '#495052'" type="left" size="30"></uni-icons>
          </view>
          <view class="topTitle hiddenText" v-show="topNav">{{
            $util.entitiesToUtf16(resData.TrueName)
          }}</view>
        </view>
      </view>

      <view class="page_top" @click="IsOpenBg = !IsOpenBg">
        <!-- <top-status></top-status> -->
        <view class="tabs">
          <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17207684593791221.png" mode="widthFix">
          </image>
          <!-- <view v-if="userid == te_userid" class="changeImg" @click.stop="changeImg">
            <uni-icons type="image" size="28"></uni-icons>
            <text>换封面</text>
          </view> -->
        </view>
      </view>
    </view>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else class="user_visitior" :class="{ openBg: IsOpenBg }">
      <view class="userBox">
        <view class="userinfo">
          <image class="hdimg" :src="resData.PhotoUrl" mode="aspectFill"></image>
          <view class="rightbox">
            <view class="namebox">
              <view class="name">{{ $util.entitiesToUtf16(resData.TrueName) }}</view>
              <view class="level">{{ resData.Level }}</view>
            </view>
            <view class="r_name_2">
              <view class="ratingbox">
                <view class="rattext">评分：</view>
                <block v-for="(value, index) in starRateView(resData.Score)" :key="index">
                  <image class="ratimg" :src="value"></image>
                </block>
              </view>
              <view class="addrebox">
                <image class="addreimg"
                  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png">
                </image>
                <view class="placed">{{ resData.City || '未知' }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="messagebox">
          <view class="me_title">擅长：</view>
          <view class="me_text">{{ resData.Skills || '未知' }}</view>
        </view>
        <view class="messagebox">
          <view class="me_title">常驻：</view>
          <view class="me_text">{{ (resData.ShopName ? resData.ShopName : '未知') + ' | ' + resData.Distance + 'km' }}
          </view>
        </view>
        <view class="messagebox">
          <view class="me_title">服务：</view>
          <view class="me_text">{{ resData.serve || 0 }}单</view>
        </view>
        <!-- <view class="bottomline"></view> -->
        <!-- <view class="Introduce">{{ resData.Resume || '' }}</view> -->
      </view>
      <view class="navbox">
        <view class="navtitle" v-for="(item, index) in navlist" :key="index" :class="{ 'text4': navindex == index }"
          @click="navswitch(index)">
          {{ item }}
          <view v-if="navindex == index" class="aft4"></view>
        </view>
      </view>
      <view class="listbox">
        <block v-if="navindex == 1">
          <block v-for="(item, index) in restoreImg(resData.Resume)" :key="index">
            <image class="teintimg" :src="item" mode="widthFix" @click="lookimg(restoreImg(resData.Resume),index)"></image>
          </block>
          <view v-if="restoreImg(resData.Resume).length == 0">
            <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
              mode="widthFix"></image>
            <view class="kongtext">暂无教练介绍</view>
          </view>
          <!-- <rich-text  class="richbox" :nodes="topCharactersHTML"></rich-text> -->
        </block>
        <block v-if="navindex == 0">
          <view v-for="(item) in resData.ServerList" :key="item.ID" class="contentbox">
            <view class="conCellBox">
              <image class="icon" :src="item.Images"></image>
              <view class="titlebox">
                <view class="title">{{ item.ProductName }}</view>
                <view class="fee">{{ item.Price }}/小时</view>
              </view>
              <view class="reservabtn" @click="gote_reserva(item.ProductName, item.ID, item.Price)">
                立即预约
              </view>
            </view>
            <view class="tipsBox">
              <view class="tipsTitle">服务备注：</view>
              <view class="tipsRemark">{{ $util.entitiesToUtf16(item.Description) || '该教练未填写服务备注' }}</view>
            </view>

          </view>
          <view v-if="resData.ServerList.length == 0">
            <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
              mode="widthFix"></image>
            <view class="kongtext">Ta还没有服务项目~</view>
          </view>
        </block>
        <block v-if="navindex == 2">
          <block v-if="!isrelist">
            <view class="load">
              <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
            </view>
          </block>
          <block v-else>
            <view class="reviewbox" v-for="(item, index) in relist" :key="index">
              <view class="re_user">
                <image class="re_hdimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
                <view class="re_namebox">
                  <view class="re_name">
                    <view class="name">{{ $util.entitiesToUtf16(item.Name) }}</view>
                    <view class="titme">{{ getTime2(item.EvalTime) }}</view>
                  </view>
                  <view class="starbox">
                    <image class="starimg" v-for="(value, index) in item.JS" :key="index"
                      src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png"></image>
                  </view>
                  <view class="re_con">
                    {{ $util.entitiesToUtf16(item.EvalContent) }}
                  </view>
                  <!-- <view class="re_sebox">
                  <image class="serviceimg"
                    src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17202319639751233.png"></image>
                  <view class="se_text">回复评价</view>
                </view> -->
                </view>
              </view>
            </view>
            <view v-if="relist.length == 0">
              <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
                mode="widthFix"></image>
              <view class="kongtext">Ta还没有评论~</view>
            </view>
          </block>

        </block>
        <block v-if="navindex == 3">
          <block v-if="!isdynamicList">
            <view class="load">
              <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
            </view>
          </block>
          <block v-else>
            <view v-if="userid == te_userid" class="puadd" @click="nav_to('/pages/dynamic/dynamic_add')">
              <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png"
                mode="widthFix"></image>
              <view class="putitle">发布</view>
            </view>
            <view v-if="dynamicList.length > 0">
              <view class="list wap" v-for="(item, index) in dynamicList" :key="index">
                <view class="userbox">
                  <image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
                  <view class="middbox">
                    <view class="name">{{
                      $util.entitiesToUtf16(item.Name)
                      }}
                      <image v-if="item.UserType != '普通用户'" mode="widthFix"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
                    </view>
                    <view class="daybox">
                      <text class="Birthday">{{ getYearStr(item.Birthday) == '未知' ? '未知' : getYearStr(item.Birthday) +
                        '后'
                        }}</text>
                      <!-- <text class="borderLine">|</text>
                  <text class="city" v-if="item.City">{{
                    item.City
                  }}</text> -->
                    </view>
                  </view>
                  <view class="time">
                    {{ getTime(item.CreateTime) }}
                  </view>
                </view>
                <view v-if="item.Content" class="content diyC">
                  {{ $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;") }}
                </view>
                <Layoutimg :item="item" :ossWatermark="ossWatermark" style="width: 95%;"></Layoutimg>

                <view class="ft_btn">
                  <view class="citybottom">
                    {{ item.City }}
                  </view>
                  <view class="buttonbox" :class="{ boxWidth: userid == te_userid }">
                    <view class="zan" v-if="userid == te_userid" @click="del(item.ID)">
                      <uni-icons type="trash" size="24" color="#9b9b9b"></uni-icons>
                    </view>
                    <view class="zan" @click="zan(item.ID)">
                      <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
                      <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
                      <text>{{
                        item.CommunityZAN.length > 0 ? item.CommunityZAN.length : ""
                        }}</text>
                    </view>
                    <view class="zan" @click="tocommit(item.ID, 0)">
                      <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
                      <text>{{
                        item.CommunityComments.length > 0
                          ? item.CommunityComments.length
                          : ""
                        }}</text>
                    </view>
                    <!-- <view class="zan"> -->
                    <!-- #ifdef MP-WEIXIN -->
                    <!-- <button hover-class="none" open-type="share" :data-id="item.ID">
										<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
									</button> -->
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS -->
                    <!-- <button hover-class="none" @click="app_share(item)">
										<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
									</button> -->
                    <!-- #endif -->
                    <!-- </view> -->
                  </view>
                </view>
                <view v-if="item.CommunityComments.length > 0" class="Commbox">
                  <view class="msgbox" v-for="(value, c_index) in item.CommunityComments" :key="c_index">
                    <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-if="value.ReplyID > 0">
                      <text>{{ $util.entitiesToUtf16(value.Name) }}
                        <text class="reviewC">回复</text>
                        {{ $util.entitiesToUtf16(value.Pre_Name) }}:</text>
                      <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                    </view>
                    <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-else>
                      <text>{{ $util.entitiesToUtf16(value.Name) }}:</text>
                      <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view v-else>
              <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
                mode="widthFix"></image>
              <view class="kongtext">Ta还没有发布挥友圈哦～</view>
            </view>
          </block>

        </block>
      </view>
      <view class="bottmobtnbox">
      </view>
      <view class="bottmobtn" v-if="navindex != 0 ">
        <view class="tebtn" @click="btnswitch">预约私教</view>
      </view>
      <inputBox :commit="commit2" @submit="submit" @onBlur="onBlur"></inputBox>
    </view>


  </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
import inputBox from "./components/input-box.vue";
import Layoutimg from "@/components/Layoutimg/Layoutimg.vue";
export default {
  components: {
    topStatus,
    inputBox,
    Layoutimg
  },
  tabTop: 0,
  data() {
    return {
      topCharactersHTML: '', //富文本解析
      ruseHTML: '<p>哈哈哈哈哈<img src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720767142506511.jpg" alt="图像"></p><p>高尔夫高手</p><p><br><img src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png" alt="图像"><img src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png" alt="图像"></p><p>哈哈哈哈哈<img src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720767142506511.jpg" alt="图像"></p><p>高尔夫高手</p><p><br><img src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png" alt="图像"><img src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png" alt="图像"></p>',
      topNav: false,
      cache_user: {},
      commit2: false, // 评论输入框控制
      review_id: 0,
      comment_id: 0,
      resData: {
        ServerList: [],
      },
      ossWatermark: '', // 图片前缀
      PageIndex: 1,
      PageSize: 10,
      IsOpenBg: false,
      userid: null,  //自己的ID
      te_userid: null, // 教练的userID
      load: false,
      ID: null,
      navlist: ['教练服务', '教练介绍', '用户评价', 'Ta的挥友圈'],
      navindex: 0,
      relist: [],  // 评论列表
      isrelist: false,
      dynamicList: [], // 动态列表
      isdynamicList: false,
    };
  },
  onPullDownRefresh() {
  },
  onReachBottom() {
    if (this.navindex == 3) {
      this.PageIndex++
      this.getDynamicList(this.te_userid)
    } else if (this.navindex == 2) {
      this.PageIndex++
      this.EvalList()
    }


  },
  computed: {

  },
  async onShow() {

  },
  async onLoad(e) {
    this.ID = e.id
    if (e.navindex) {
      this.navindex = e.navindex
    }
    await this.getDetail(e.id)
    this.ossWatermark = this.$ossWatermark
    this.userid = uni.getStorageSync("user").UserID;
    this.cache_user = uni.getStorageSync("user");
    // this.getDynamicList()
    this.EvalList()
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > this.lastScrollTop) {
      // 向下滚动
      if (e.scrollTop >= 150) {
        this.topNav = true; // 你的逻辑
      }
      this.IsOpenBg = false; // 滚动条向上滚时执行的逻辑
    } else {
      // 向上滚动
      if (e.scrollTop < 230) {
        this.topNav = false; // 你的逻辑
      }
    }
    this.lastScrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
  },
  onShareAppMessage(e) {
    let id = this.ID;

    let Name = this.$util.entitiesToUtf16(this.resData.TrueName);
    if (this.resData.Sex == "女") {
      return {
        title: `${Name}给你推荐了一位教练美女`,
        path: `/pages/teacher/detail?pid=${id}&id=${this.resData.ID}`,
        imageUrl: this.resData.PhotoUrl,
      };
    } else {
      return {
        title: `${Name}给你推荐了一位教练高手`,
        path: `/pages/teacher/detail?pid=${id}&id=${this.resData.ID}`,
        imageUrl: this.resData.PhotoUrl,
      };
    }
    // }
  },
  //分享朋友圈
  onShareTimeline() {
    let Name = this.$util.entitiesToUtf16(this.resData.Name);
    return {
      title: `${Name}给你推荐了一位教练${this.resData.Sex == "女" ? '美女' : '高手'}`,
      query: "id=" + this.ID + '&isShare=1',
    };
  },
  methods: {
    lookimg(url, index) {
      let arr = []
			for (let i = 0; i < url.length; i++) {
					arr.push(url[i]+this.ossWatermark)
			}
      // arr = arr.map(item => item + this.ossWatermark)
      uni.previewImage({
        urls: arr,
        current: index,
      });
    },
    // 图片字段截取返回数组
    restoreImg(Images) {
      if (Images.includes('.png') || Images.includes('.jpg') || Images.includes('.jpeg') || Images.includes('.webp')) {
        let imglist = Images.split(',')
        return imglist
      }else{
        return []
      }
      
    },
    changeImg() {
      try {
        let _this = this;
        uni.chooseImage({
          count: 1, //默认9
          mediaType: ["image"],
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera", "album"], //从相册选择
          success: async function (res) {
            let upImg = await _this.$upload(res.tempFiles[0].path, (res) => { });
            _this.subFix(upImg);
          },
        });
      } catch (error) {
        this.$pv.msg("图片上传失败");
      }
    },
    async subFix(BgImg) {
      let res = await this.$api.post("User/UpdateUserBG", { BgImg });
      if (res.code == 0) {
        this.resData.BgImg = BgImg;
        this.$pv.msg("修改成功");
      }
    },
    //跳转页面
    gote_reserva(ProductName, skliiID, Price) {
      let _this = this
      let isAuth = uni.getStorageSync('user').IsAuth
      if (isAuth != 1) {
        uni.showModal({
          title: "温馨提示",
          content: "未注册用户不能预约，请先注册账号",
          confirmText: "关闭",
          cancelText: "注册账号",
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1,
              });
            } else if (res.cancel) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
      } else {
        this.nav_to('/pages/teacher/te_reserva?skill=' + ProductName + '&skillid=' + skliiID + '&skillprice=' + Price + '&id=' + this.ID)
      }
    },
    getTime2(l) {
      let d = new Date(l);
      let timestamp = d.getTime();
      return this.$util.unixDatetime(timestamp, 'year');
    },
    //教练评价列表
    async EvalList() {
      // this.isrelist = false
      let res = await this.$api.post('Technicians/EvalList', {
        TechnicianID: this.ID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      })
      if (res.code == 0) {
        this.relist = this.relist.concat(res.data)
        this.isrelist = true
      }
    },
    // 获取教练信息详情
    async getDetail(e) {
      let id = e == 0 ? this.ID : e
      let res = await this.$api.post("Technicians/Detail", {
        ID: id,
      });
      const { code, data } = res;
      console.log(res, 'res');
      if (code == 0) {
        this.resData = data
        this.load = true
        this.te_userid = data.UserID
        // this.topCharactersHTML = this.$util.entitiesToUtf16(this.ruseHTML.replace(/\<img/gi, '<img class="teintimg" mode="widthFix"'))
        this.getDynamicList(data.UserID)
      }
    },
    //返回上一页
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
    //列表切换
    navswitch(index) {
      this.navindex = index
      if (index == 0) {

      } else if (index == 2) {
        this.relist = []
        this.PageIndex = 1
        this.EvalList()
      } else if (index == 3) {
        this.dynamicList = []
        this.PageIndex = 1
        this.getDynamicList(this.te_userid)
      }
    },
    btnswitch() {
      this.navindex = 0
    },
    //朋友圈
    async getDynamicList(id) {
      // this.isdynamicList = false
      let res = await this.$api.post("Community/UserCommunity", {
        UserID: id,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        CompanyID: 6003,
      });
      if (res.code == 0) {
        let l = this.dynamicList.concat(res.data);
        this.dynamicList = this.clearRepetition(l, "ID");
        this.dynamicLength = this.dynamicList.length;
        this.isdynamicList = true
      }

      // this.$pv.closeLoad();
    },
    // 去重,后面的覆盖前面的
    clearRepetition(arr, key = "id") {
      let newArr = [];
      arr.forEach((item) => {
        let index;
        let check = newArr.every((newItem, i) => {
          if (item[key] !== newItem[key]) {
            index = -1;
            return true;
          } else {
            index = i;

            return false;
          }
        });
        if (check) {
          newArr.push(item);
        } else {
          newArr.splice(index, 1, item);
        }
      });
      return newArr;
    },
    async submit(val) {
      if (val != "") {
        let utf16 = this.$util.utf16ToEntities(val).slice(0, 200);
        let res = await this.$api.post("/Community/UserComment", {
          CommunityID: this.review_id,
          Content: utf16,
          CompanyID: 6002,
          ReplyID: this.comment_id,
        });
        if (res.code == 0) {
          console.log("user====>", res);
          this.dynamicList.forEach((item, index) => {
            if (item.ID == this.review_id) {
              item.CommunityComments.push({
                UserID: uni.getStorageSync("user").UserID,
                HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
                Name: uni.getStorageSync("user").Name,
                Content: val,
                CreateTime: new Date(),
                ReplyID: this.comment_id,
                Pre_Name: this.repName,
                ID: res.data
              });
              this.dynamicList.splice(index, 1, item);
              console.log(item.ID, this.review_id);
            }
          });

          this.commit2 = !this.commit2;
        }
      } else {
        this.$pv.msg("评论不能为空");
      }
    },
    onBlur(emit) {
      setTimeout(() => {
        this.commit2 = emit;
      }, 500)

    },
    // 评论
    tocommit(ID, C_ID) {
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      this.commit2 = !this.commit2;
      this.review_id = ID;
      this.comment_id = C_ID;
    },
    //回复消息
    comment_edit(index, c_index, Name = "") {
      let _this = this;
      _this.repName = Name;
      const user = uni.getStorageSync("user");

      const item = this.dynamicList[index].CommunityComments[c_index];

      if (user.ID == item.UserID) {
        uni.showActionSheet({
          itemList: ["删除评论"],
          success: function (res) {
            if (res.tapIndex == 0) {
              _this.delReview(index, c_index);

              return;
            }
          },
          fail: function (res) { },
        });
      } else {
        //直接回复
        this.tocommit(item.CommunityID, item.ID);
      }
    },
    // 点赞
    async zan(item) {
      this.zan_id = item;
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      let res = await this.$api.post("Community/ZAN", {
        ID: item,
      });

      if (JSON.stringify(res.data) == "true") {
        this.$pv.msg("点赞成功");

        this.dynamicList.forEach((item, index) => {
          if (item.ID == this.zan_id) {
            item.IsMyZAN = 1;
            item.CommunityZAN.push({
              UserID: this.cache_user.UserID,
              HeadImgUrl: this.cache_user.HeadImgUrl,
            });
            this.dynamicList.splice(index, 1, item);
          }
        });
      } else {
        this.$pv.msg(res.message);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fefefe;
}

button::after {
  border: none;
}

.page_top2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 300rpx;
    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}

.page_top {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  // background: #29282c;
  // z-index: 999999;

  .tabs {
    position: relative;
    display: flex;
    // align-items: center;
    height: 550rpx;
    // background-color: plum;
    z-index: -1;

    .changeImg {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 60rpx;
      right: 10rpx;
      font-size: 20rpx;
    }

    >image {
      width: 100%;
      height: 100%;
    }

    .name {
      font-size: 36rpx;
      color: #fff;
      padding-left: 20rpx;
      width: 200rpx;
    }

    button {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 40rpx;
      top: 40rpx;
      text-align: center;
      line-height: 50rpx;

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .onlin {
      position: absolute;
      left: 40rpx;
      top: 6%;
      width: 208rpx;
      height: 44rpx;
      background: #ffffff;
      border-radius: 22px;
      line-height: 44rpx;
      color: #1db468;
      font-size: 24rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: "";
        display: inline-block;
        background: #1db468;
        width: 12rpx;
        height: 12rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
      }
    }
  }
}


.user_visitior {
  position: absolute;
  top: 330rpx;
  left: 0;
  // margin-left: -351rpx;
  z-index: 2;
  transition: 0.5s;
  box-sizing: border-box;
  width: 100%;

  .userBox {
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.11);
    width: 702rpx;
    margin: 0 auto;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
  }

  .userinfo {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .hdimg {
      width: 112rpx;
      height: 112rpx;
      border-radius: 50%;
      background-color: aqua;
    }

    .rightbox {
      margin-left: 24rpx;

      .namebox {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .name {
          font-size: 36rpx;
          font-weight: bold;
          color: #333333;
          margin-right: 8rpx;
        }

        .level {
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: #FFF9F5;
          border: 2rpx solid #FF7713;
          text-align: center;
          color: #FF7108;
          font-size: 26rpx;
          text-align: center;
        }
      }

      .r_name_2 {
        display: flex;
        align-items: center;

        .ratingbox {
          display: flex;
          align-items: center;
          margin-right: 18rpx;

          .rattext {
            font-size: 24rpx;
            color: #666666;
          }

          .ratimg {
            width: 24rpx;
            height: 24rpx;
            margin-right: 6rpx;
          }
        }

        .addrebox {
          display: flex;
          align-items: center;

          .addreimg {
            width: 32rpx;
            height: 32rpx;
          }

          .placed {
            color: #666666;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  .messagebox {
    display: flex;
    // align-items: center;
    margin-bottom: 8rpx;

    .me_title {
      color: #999999;
      font-size: 28rpx;
      min-width: 84rpx;
    }

    .me_text {
      color: #333333;
      font-size: 28rpx;
    }
  }

  .bottomline {
    width: 654rpx;
    height: 2rpx;
    border-bottom: 1rpx solid #E4E4E4;
    margin: 0 auto;
    margin-top: 16rpx;
  }

  .Introduce {
    color: #666666;
    font-size: 26rpx;
    margin-top: 24rpx;
  }
}

.openBg {
  transition: 0.5s;
  transform: translateY(300rpx);
}

.navbox {
  // width: 704rpx;
  width: 100%;
  height: 116rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 20rpx;
  background-color: #fefefe;
  border-bottom: 1rpx solid #E4E4E4;

  .navtitle {
    width: calc(100% / 3);
    height: 100%;
    color: #999999;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .text4 {
    color: #333333;
    font-size: 32rpx;
  }

  .aft4 {
    width: 40rpx;
    height: 8rpx;
    background: #706EEE;
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.listbox {
  padding: 0 24rpx;
  box-sizing: border-box;
  // margin-top: 32rpx;
  // margin-bottom: 130rpx;
  padding-top: 40rpx;
  padding-bottom: 130rpx;
  background-color: #fefefe;

  .teintimg {
    // max-width: 100%;
    width: 100%;
    // min-height: 500rpx;
    margin: 0 auto;
    display: block;
    // background-color: #706EEE;
  }

  .contentbox {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);

    .conCellBox {
      width: 100%;
      display: flex;
      align-items: center;

      .icon {
        width: 112rpx;
        min-width: 112rpx;
        height: 112rpx;
        // background-color: yellowgreen;
        margin-right: 32rpx;
        border-radius: 18rpx;
      }

      .titlebox {
        margin-right: auto;

        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }

        .fee {
          font-size: 32rpx;
          font-weight: 500;
          color: #FC201C;
          margin-top: 12rpx;
        }
      }

      .reservabtn {
        width: 182rpx;
        min-width: 182rpx;
        height: 64rpx;
        background: #706EEE;
        border-radius: 32rpx;
        text-align: center;
        line-height: 64rpx;
        color: #fff;
        font-size: 28rpx;
      }
    }

    .tipsBox {
      width: 100%;
      display: flex;
      font-size: 24rpx;
      margin-top: 14rpx;
      color: #666666;

      .tipsTitle {
        width: 145rpx;
        min-width: 145rpx;
        color: #666666;
      }

      .tipsRemark {
        color: #666666;
      }

    }

  }

  .reviewbox {
    margin-bottom: 32rpx;

    .re_user {
      display: flex;

      // align-items: center;
      .re_hdimg {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        background-color: #1db468;
        margin-right: 16rpx;
      }

      .re_namebox {
        flex: 1;

        .re_name {
          display: flex;
          align-items: center;
          margin-bottom: 6rpx;

          .name {
            font-size: 28rpx;
            font-weight: bold;
            color: #333333;
            margin-right: auto;
          }

          .titme {
            font-size: 24rpx;
            color: #999999;
          }
        }

        .starbox {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;

          .starimg {
            width: 24rpx;
            height: 24rpx;
          }
        }

        .re_con {
          font-size: 28rpx;
          color: #333333;
          // border-bottom: 1rpx solid #E4E4E4;
          padding-bottom: 24rpx;
        }

        .re_sebox {
          display: flex;
          align-items: center;
          border-bottom: 1rpx solid #E4E4E4;
          padding-bottom: 32rpx;

          .serviceimg {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
            display: block;
          }

          .se_text {
            color: #999999;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}

.bottmobtnbox {
  width: 100%;
  height: 196rpx;
}

.bottmobtn {
  width: 100%;
  height: 196rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;

  .tebtn {
    width: 670rpx;
    height: 88rpx;
    background: #706EEE;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    margin: 20rpx auto;
  }
}

.puadd {
  width: 100rpx;
  height: 46rpx;
  border-radius: 32rpx;
  background-color: #706eee;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;

  .putitle {
    color: #fff;
    font-size: 22rpx;
    font-weight: 400;
  }

  .releaseimg {
    width: 24rpx;
    height: 24rpx;
  }
}

.list {
  // background: #262626;
  // padding-bottom: 20rpx;
  display: flex;
  flex-wrap: wrap;
  // margin-top: 8rpx;
  box-sizing: border-box;
  width: 95%;
  margin: 13rpx auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 16rpx;
  box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
  padding: 20rpx;
  box-sizing: border-box;

  .userbox {
    display: flex;
    width: 100%;

    .userimg {
      min-width: 80rpx;
      width: 80rpx;
      height: 80rpx;
      display: block;
      border-radius: 50%;
    }

    .middbox {
      margin-left: 24rpx;
      flex: 1;
      min-width: 424rpx;
      width: 424rpx;

      .name {
        width: 100%;
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        display: flex;
        align-items: center;

        >image {
          width: 76rpx;
          margin-left: 10rpx;
        }
      }

      .daybox {
        font-weight: 400;

        .Birthday {
          font-size: 24rpx;
          color: #999999;
          // border-right: 1rpx solid #999999;
          padding: 0 15rpx 0 0;
        }

        .borderLine {
          color: #999999;
          font-size: 24rpx;
        }

        .city {
          font-size: 24rpx;
          color: #999999;
          margin-left: 15rpx;
        }
      }
    }

    .time {
      // margin-left: 268rpx;
      width: 140rpx;
      text-align: right;
      font-size: 24rpx;
      color: #999999;
    }
  }

  &::after {
    content: "";
    display: block;
    height: 1px;
    width: 325rpx;
  }

  .message {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name-avatar {
      height: 80rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 10rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }

      .name {
        margin-left: 10rpx;
        font-size: 15px;
        font-weight: 600;
      }
    }

    .time {
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 15px;
      text-align: right;
    }
  }

  .content {
    margin-top: 24rpx;
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #7b7b7b;
    width: 100%;
  }

  .diyC {
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    white-space: pre-line;
  }

  .imglist {
    box-sizing: border-box;
    width: 100%;
    margin: 10rpx 0 20rpx 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .img {
      box-sizing: border-box;
      width: 180rpx;
      height: 180rpx;
      margin-top: 20rpx;
      margin-left: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .ft_btn {
    width: 100%;
    margin-bottom: 10rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    // justify-content: flex-end;
    // justify-content: space-between;

    .citybottom {
      font-size: 24rpx;
      color: #999999;
    }

    .buttonbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 140rpx;
      font-size: 26rpx;
      margin-left: auto;

      .zan {
        display: flex;
        align-items: center;
      }
    }

    .boxWidth {
      width: 230rpx;
    }

    button {
      height: 44rpx;
      width: 44rpx;
      // margin-left: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 44rpx;
        width: 44rpx;
      }
    }

    .icon_box {
      height: 48rpx;
      width: 48rpx;
      border-radius: 48rpx;
      background: rgba(255, 255, 255, 0.9);
      margin-right: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 32rpx;
        width: 32rpx;
      }
    }

    .time {
      width: 75%;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 15px;
      text-align: left;
    }

    .icon_pad {
      width: 44rpx;
      height: 44rpx;
      padding-left: 25rpx;
      padding-right: 10rpx;
      text-align: left;
    }
  }

}

.kongimg {
  width: 330rpx;
  height: 298rpx;
  display: block;
  margin: 0 auto;
  margin-top: 102rpx;
  margin-bottom: 40rpx;
}

.kongtext {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
}
</style>
